<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
	{
	style: {
	navigationBarTitleText: '我的课程',
	enablePullDownRefresh: false,
	},
	}
</route>
<template>
	<view>
		<view class="sticky top-0 z-100 left-0 w-full">
			<wd-tabs v-model="state.curTab">
				<block v-for="item in state.tabList" :key="item.value">
					<wd-tab :title="item.name">

					</wd-tab>
				</block>
			</wd-tabs>
		</view>

		<k-list :loading="loading" :is-empty="!orderList.length">
			<view class="order" v-for="(item, index) in orderList" :key="item.id">
				<view
					class="text-sm text-base mb-[22rpx] flex justify-between items-center py-[20rpx] border-b-solid border-b-1 border-[#EDEDED]">
					<text>{{ item.create_time }}</text>
					<text>{{ item.order_status_desc }}</text>
				</view>
				<around :data="goods" :showSales="false" image-width="311rpx" image-height="186rpx"
					v-for="goods in item.order_goods" :key="goods.goods_id" nameKey="goods_name" imageKey="goods_image"
					priceKey="goods_price" @click="to(`pages-sub/product/product-detail?id=${goods.goods_id}`)">
				</around>
				<view class="flex gap-x-[22rpx] mt-[10rpx] pb-[20rpx]" v-if="item.order_status == 0">
					<wd-button :round="false" :block="true" plain custom-class="flex-1"
						@click="handleCancelOrder(item.id, index)">
						取消订单
					</wd-button>
					<wd-button :round="false" :block="true" type="primary" custom-class="flex-1"
						@click="to(`pages-sub/person/order-detail?id=${item.id}`)">
						立即支付
					</wd-button>
				</view>
			</view>
		</k-list>

	</view>
</template>

<script setup>
import {
	to
} from '@/utils/navigation';
import useReachBottomLoadMore from "@/hooks/useReachBottomLoadMore";
import {
	fetchOrderList,
	fetchCancelOrder
} from "@/service/order";
import {
	showToast
} from '@/utils/uni';


const orderStatus = {
	1: '待付款',
	2: '已购买',
}

const state = ref({
	curTab: 0,
	tabList: [{
		name: '全部',
		value: "all",
	},
	{
		name: '待付款',
		value: "pay",
	},
	{
		name: '已购买',
		value: "delivery",
	},
	],
})

const requestParams = computed(() => ({
	type: state.value.tabList[state.value.curTab].value
}))

const {
	data: orderList,
	loading,
	refresh
} = useReachBottomLoadMore(fetchOrderList, requestParams);


function handleCancelOrder(id, index) {

	uni.showModal({
		content: "确定要取消该订单吗?",
		success: (r) => {
			if (r.confirm) {
				fetchCancelOrder(id).then((res) => {
					orderList.value[index].order_status = 4;
					orderList.value[index].order_status_desc = "已关闭";
					showToast(res.msg)
				})
			}
		}
	});
}

onShow(() => {
	refresh();
});
</script>

<style lang="scss" scoped>
.order {
	padding: 0 20rpx 10rpx;
	margin: 30rpx;
	box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
}
</style>